<template>
  <u-picker
    :value="value"
    :range="list"
    :defaultSelector="defaultSelector"
    :maskCloseAble="false"
    :confirmColor="settings.theme"
    mode="multiSelector"
    rangeKey="label"
    @confirm="onSelectConfirm"
    @cancel="onSelectCancel"
    @columnchange="onSelectChange"
  />
</template>
<script>
import { getListByParentIdReq } from "./api";
import { mapState } from 'vuex'
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    defaultValue: {
      type: String,
      default: ""
    },
    value: {
      type: Boolean,
      default: false
    },
    level: {
      type: Number,
      default: 3
    },
    muiltiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultSelector: [0, 0, 0],
      provinceList: [],
      provinceId: "",
      provinceLabel: "",
      cityList: [],
      cityId: "",
      cityLabel: "",
      areaList: [],
      areaId: "",
      areaLabel: ""
    };
  },
  computed: {
    ...mapState(['settings']),
    list() {
      if (this.level === 3) {
        return [this.provinceList, this.cityList, this.areaList];
      } else {
        return [this.provinceList, this.cityList];
      }
    }
  },
  watch: {
    defaultValue: {
      handler(newVal) {
        console.log("debug log --> ", newVal);
      },
      immediate: true
    }
  },
  created() {
    this.defaultSelector = this.level === 3 ? [0, 0, 0] : [0, 0];
  },
  mounted() {
    this.loadProvinceList();
  },
  methods: {
    onSelectCancel() {
      this.$emit("cancel");
    },
    onSelectConfirm() {
      const result = [];
      for (let i = 0; i < this.defaultSelector.length; i++) {
        const index = this.defaultSelector[i];
        switch (i) {
          case 0:
            result.push(this.provinceList[index]);
            break;
          case 1:
            result.push(this.cityList[index]);
            break;
          case 2:
            if (this.areaList && this.areaList.length > 0) {
              result.push(this.areaList[index]);
            }
            break;
          default:
            break;
        }
      }
      this.$emit("confirm", result);
    },
    onSelectChange({ column, index }) {
      switch (column) {
        case 0:
          this.provinceId = this.provinceList[index]["id"];
          this.provinceLabel = this.provinceList[index]["label"];
          this.defaultSelector = [index, 0, 0];
          this.loadCityList();
          break;
        case 1:
          this.cityId = this.cityList[index]["id"];
          this.cityLabel = this.cityList[index]["label"];
          this.defaultSelector = [this.defaultSelector[0], index, 0];
          this.loadAreaList();
          break;
        case 2:
          this.areaId = this.areaList[index]["id"];
          this.areaLabel = this.areaList[index]["label"];
          this.defaultSelector[2] = index;
          break;
        default:
          break;
      }
    },
    loadProvinceList() {
      getListByParentIdReq(0)
        .then(pRes => {
          const provinceList = pRes.map(item => ({
            id: item.id,
            label: item.name,
            type: "province"
          }));
          this.provinceList = provinceList;
          this.provinceId = provinceList[0]["id"];
          this.provinceLabel = provinceList[0]["label"];
          this.loadCityList();
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    loadCityList() {
      getListByParentIdReq(this.provinceId)
        .then(cRes => {
          const cityList = cRes.map(item => ({
            id: item.id,
            label: item.name,
            type: "city"
          }));
          this.cityList = cityList;
          this.cityId = cityList[0]["id"];
          this.cityLabel = cityList[0]["label"];
          this.loadAreaList();
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    loadAreaList() {
      getListByParentIdReq(this.cityId)
        .then(aRes => {
          const areaList = aRes.map(item => ({
            id: item.id,
            label: item.name,
            type: "area"
          }));
          this.areaList = areaList;
          if (areaList && areaList.length > 0) {
            this.areaId = areaList[0]["id"];
            this.areaLabel = areaList[0]["label"];
          }
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    }
  }
};
</script>
<style lang="scss"></style>
